<!--  -->
<template>
  <div class="mini" v-if="songList.length !== 0">
    <div class="left"><img :src="songList[currentIndex].imgUrl" alt="" /></div>
    <div class="center" @click="isFullScreen">{{ songList[currentIndex].name }}</div>
    <div class="right">
      <div class="icon" @click="playClick">
        <icon v-show="!this.$store.state.isPlay" icon="#icon-bofang2"></icon>
        <icon v-show="this.$store.state.isPlay" icon="#icon-zantingtingzhi"></icon>
      </div> 
      <svg id="svg" width="25px" height="25px" viewBox="0,0,100,100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
        <circle class="svg-active" cx="50" cy="50" r="49" stroke="#fff" stroke-width="2" fill="rgba(0,0,0,0)"
                stroke-dasharray="314,314"  :stroke-dashoffset="offset" />
        <circle class="svg-background" cx="50" cy="50" r="49" stroke="rgba(255, 255, 255, 0.3)" stroke-width="1" fill="rgba(0,0,0,0)" />
      </svg>
    </div>
  </div>
</template>

<script>
import Icon from "@/components/content/icon/Icon.vue";

export default {
  name: "PlayerMini",
  components: {
    Icon,
  },
  data() {
    return {
      songList: [],
      currentIndex: 0,
      offset: 0,
    };
  },
  computed: {
    monitor() {
      return this.$store.state.songList
    },
    currentsong() {
      return this.$store.state.currentIndex;
    },
    playOffset() {
      return this.$store.state.currentTime 
    }
  },
  watch: {
    monitor() {
      this.songList = this.$store.state.songList;
      this.currentIndex = this.$store.state.currentIndex;
    },
    currentsong() {
      this.songList = this.$store.state.songList;
      this.currentIndex = this.$store.state.currentIndex;
    },
    playOffset() {
      this.offset = 314 - 314 * (this.$store.state.currentTime / (this.songList[this.currentIndex].duration / 1000))
    }
  },
  methods: {
    playClick() {
      this.$store.commit("isPlay")
    },
    isFullScreen() {
      this.$store.commit("isFullScreen")
    }
  }
};
</script>
<style lang='scss' scoped>
.mini {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 49px;
  background-color: $color-highlight-background;
  .left {
    width: 49px;
    img {
      position: relative;
      top: 15%;
      left: 15%;
      width: 70%;
      height: 70%;
      border-radius: 50%;
    }
  }
  .center {
    line-height: 49px;
    flex: 1;
    padding-left: 10px;
  }
  .right {
    position: relative;
    width: 49px;
    text-align: center;
    .icon {
      position: absolute;
      top: 11px;
      left: 11px;
      width: 25px;
      height: 25px;
      line-height: 25px;
      z-index: 99;
    }
    #svg {
      position: absolute;
      top: 11px;
      left: 11px;
      transform: rotate(-90deg);
    }
  }
}
</style>

<svg
      :width="radius"
      :height="radius"
      viewBox="0 0 100 100"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        class="progress-background"
        r="50"
        cx="50"
        cy="50"
        fill="transparent"
      />
      <circle
        class="progress-bar"
        r="50"
        cx="50"
        cy="50"
        fill="transparent"
        :stroke-dasharray="dashArray"
        :stroke-dashoffset="dashOffset"
      />
    </svg>